div#tooltip {
position: absolute;
z-index: 2;
display: none;
color: #fff;
font-family: Verdana,Arial,MS Serif,Courier;
font-size: 12px;
background-color: #0094cb;
border: 2px solid #FFF;
border-radius: 3px;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
div#tooltip div.mousehovercontent {
width: 500px;
padding: 5px;
}
div#tooltip div.mousehovercontent table {
border: 0px;
margin: 0px;
border-collapse: collapse;
width: 100%;
}
div#tooltip div.mousehovercontent table td,
div#tooltip div.mousehovercontent table th {
text-align: left;
vertical-align: top;
border-bottom: 1px dashed #006489;
padding: 5px 0px 5px 0px;
color: #ffffff;
text-wrap: avoid;
white-space: pre-wrap;
}
div#tooltip div.mousehovercontent table th {
padding-right: 10px;
}
div#tooltip div.mousehovercontent table td.statusIndicator {
text-align: right;
padding-left: 10px;
}
div#tooltip div.mousehovercontent table td.statusIndicator span {
padding: 1px 3px;
border: 1px solid #000000;
color: #000000;
-moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
-moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; -khtml-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
}
div#tooltip div.mousehovercontent table tr:first-child td,
div#tooltip div.mousehovercontent table tr:first-child th {
padding-top: 0px;
}
div#tooltip div.mousehovercontent table tr:last-child td,
div#tooltip div.mousehovercontent table tr:last-child th {
border: 0px;
padding-bottom: 0px;
}
/* Ensure the card takes up the full viewport height minus any top margin */
.card {
height: calc(100vh - 30px);
display: flex;
flex-direction: column;
}
.card-header img {
height: auto;
max-height: 50px; /* Keeps logo from expanding the header */
width: auto;
}
.card-body {
position: relative;
flex-grow: 1;
padding: 0;
}
/* Sidebar styling */
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 350px;
max-width: 25%;
height: 100%;
background: #f8f9fa;
padding: 15px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 10;
}
/* Sidebar visible state */
.sidebar.show {
transform: translateX(0);
}
/* Map container styling */
.map-container {
width: 100%;
height: 100%;
background-color: #e0e0e0; /* Fallback color */
}
/* Sidebar button styling */
.btn-toggle {
width: 100%;
background-color: #f8f9fa; /* Optional: Adjust to sidebar background */
color: #343a40;
font-weight: bold;
border: none;
padding: 10px 15px;
}
/* Hover effect */
.btn-toggle:hover {
background-color: #e9ecef; /* Change color on hover */
color: #495057;
}
/* Caret icon rotation */
.toggle-icon.rotate {
transform: rotate(180deg);
}
.listItemOn{
background-color: #e5ffdc !important;
}
#customerSearchResultUL {
max-height: 200px;
overflow:auto;
}
#addressSearchResult, #customerSearchResult {
position: absolute;
width: 100%;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: 10px;
display: none; /* Hidden by default */
}
.custResultLink:hover {
background-color: #f1f1f1;
}
.wide-popover {
max-width: 500px;
width: auto; /* Allows dynamic shrinking */
}
.wide-popover300 {
width: 300px;
--bs-popover-max-width : 300px;
}
.wide-popover600 {
width: 600px;
--bs-popover-max-width : 600px;
}
#jobListContainer {
max-height: 300px;
overflow : auto;
}
#employeeListContainer {
max-height: 300px;
overflow : auto;
}
#customerReferenceListContainer {
max-height: 125px;
overflow-x: hidden;
overflow-y : auto;
}
.badge {
max-height: 16px; /* Matches the icon size */
max-width: 16px; /* Ensures it remains circular */
display: inline-flex; /* Centers the content inside */
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
/* Enable background when open Bootstrap modal popup */
.modal, .modal-backdrop {
pointer-events: none; /* Allow clicks to pass through the modal */
}
.modal-dialog {
pointer-events: auto; /* Only make the dialog box interactable */
}
#map {
z-index: 1040; /* Below the modal */
}
.modal, #sidebar {
z-index: 1050; /* Above the map */
}
.modal {
overflow: hidden; /* Prevent the entire modal from scrolling */
}
.modal-dialog {
overflow: auto; /* Allow the modal-dialog to scroll independently */
max-height: 90vh; /* Limit the modal's height to the viewport */
}
.modal-body {
overflow-auto: auto; /* Enable scrolling for the modal body */
max-height: 60vh; /* Ensure a reasonable height for content scrolling */
font-size: 0.875rem;
}
#jobCreateModal-body {
overflow-auto: auto; /* Enable scrolling for the modal body */
max-height: 80vh; /* Ensure a reasonable height for content scrolling */
font-size: 0.875rem;
}
.col-disabled {
pointer-events: none; /* Prevent interactions */
opacity: 0.5; /* Dim the appearance */
cursor: not-allowed; /* Show a disabled cursor */
}
.opacity-85 {
opacity: 0.85;
}
#day-timesheetContainer-data, #empTodayJobList, #day-gpsContainer-data, #period-gpsContainer-data, #period-gpsContainer-data, #mainJobList {
font-size: 0.75rem;
}